<!--
 * @Author: 阳婷 
 * @pageName: '弹窗' 
 * @Date: 2018-01-30 11:23:08 
 * @Last Modified by:   阳婷 
 * @Last Modified time: 2018-01-30 11:23:08 
 -->
<template>
  <teleport to="body">
    <div v-show="showModal" class="modal-box">
      <div class="modal-body" :style="{width:width}">
        <div class="modal-header">
          {{title}} <i class="el-icon-close f-r modal-close" @click="cancel"></i>
        </div>
        <div class="modal-content">
          <slot></slot>
        </div>
      </div>
    </div>
  </teleport>
</template>
<script>
  export default {
    props: {
      showModal: {
        type: Boolean,
        require: true,
      },
      title: {
        type: String
      },
      width: {
        type: String,
        default: '500px'
      }
    },
    emits: ['cancel'],
    data() {
      return {};
    },
    methods: {
      cancel() {
        this.$emit("cancel");
      }
    }
  };
</script>
<style scoped>
  .modal-box {
    width: 100%;
    height: 100%;
    background-color: rgba(55, 55, 55, 0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2001;
    left: 0;
    overflow: auto;
  }

  .modal-body {
    background-color: #fff;
    margin: 10px auto;
    position: relative;
    outline: 0;
    top: 90px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 6px;
    box-sizing: border-box;
    color: #657180;
    /* overflow:auto; */
  }

  .modal-header {
    border-bottom: 1px solid #e3e8ee;
    padding: 10px 15px;
    color: #464c5b;
  }

  .modal-close {
    font-size: 18px;
    color: #999;
    cursor: pointer;
  }

  .modal-content {
    padding: 8px 15px;
    overflow: auto;
  }

  /* .modal-footer {
  border-top: 1px solid #e3e8ee;
  padding: 8px 15px;
  text-align: right;
} */
</style>